<template>
  <div class="operationBox">
    <div
      class="content"
      ref="content"
      @touchstart="startTouch"
      @touchmove="move"
      @touchend="endTouch"
      @scroll="scroll"
      :style="scroll_style"
      :class="scroll_class"
    >
      <div
        class="down"
        :style="'height:'+top+'px;line-height:'+top+'px;'"
        ref="down"
      >{{downText}}</div>
      <div class="enclose" :style="'top:'+top+'px;'" ref="enclose">
        <slot></slot>
      </div>
    </div>
    <!-- <div style=" position: fixed;top: 0;left: 0;" >{{top}}</div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      originY: 0, //起点
      targetY: 0, //手指滑动位置
      updataOriginY: 0, //滑动到顶部的时候记录一个起点，用户做滑动到底的动画
      top: 0,   //下拉元素距离顶部的距离
      historyTop: 0,  //top的缓存
      downText: "下拉即可刷新...",    //上拉文案
      down:false    //判断上滑下滑动作是否连贯
    };
  },
  props:['scroll_style','scroll_class'],
  methods: {
    scroll(e) {
      if (this.$refs.content.scrollTop + this.$refs.content.clientHeight == this.$refs.content.scrollHeight) {    //触底
        this.$emit('upLoad')
      }
    },
    startTouch(e) {
      this.$refs.enclose.style.transition = "none"; //点下不需要过度效果，取消掉
      this.$refs.down.style.transition = "none"; //点下不需要过度效果，取消掉

      this.originY = e.targetTouches[0].clientY; //手指按下记录一个起点   用于判断上滑下滑
      this.originY2 = e.targetTouches[0].clientY; //手指按下记录一个起点
    },
    move(e) {
      this.targetY = e.targetTouches[0].clientY;    //用户手指实时滑动坐标，配合originY来判断用户上滑还是下滑
      // 下拉
      if (this.originY - this.targetY < 0) {
        this.down = true
        if (this.$refs.content.scrollTop == 0) {
          e.preventDefault();
          this.updataOriginY = e.targetTouches[0].clientY;
          this.top = (this.updataOriginY - this.originY2) / 2.0 + this.historyTop;
          this.downText = this.top >= 70 ? "释放即可刷新..." : "下拉即可刷新...";
        }else{
          this.originY2 = e.targetTouches[0].clientY; //不是顶部的时候反复刷新起点
        }
      }
      // 上拉
      if (this.originY - this.targetY > 0) {
        if(this.top>0){   
          e.preventDefault();
          if(this.down){    //判断上滑下滑动作时候连贯
            this.top = (this.targetY-this.originY2) / 2.0 + this.historyTop;
          }else{
            this.top = this.historyTop - (this.originY2-this.targetY)
          }
        }
      }

      this.originY = e.targetTouches[0].clientY; //重新定义起点为上一步滑动的位置。这样才能实时判断用户上滑还是下滑
    },
    endTouch(e) {
      this.$refs.enclose.style.transition = "all .3s ease-in-out"; //释放添加回弹效果
      this.$refs.down.style.transition = "all .3s ease-in-out"; //释放添加回弹效果
      this.down = false

      if (this.top >= 70) {
        this.downText = "加载中...";
        this.top = 70;
        setTimeout(()=>{
          this.$emit('downRefresh',()=>{
            // console.log('下拉刷新回调函数')
            if(this.top <= 0) return
            this.top = 0
            this.historyTop = 0;
            this.downText = "加载中...";
            this.$refs.enclose.style.transition = "all .2s ease-in-out"; //释放添加回弹效果
            this.$refs.down.style.transition = "all .2s ease-in-out"; //释放添加回弹效果
            this.down = false
          })
        },500)
      } else {
        this.downText = "下拉即可刷新...";
        this.top = 0;
      }
      this.historyTop = this.top;
    }
  }
};
</script>

<style scoped>
.operationBox .content {
  height: 400px;
  overflow-y:scroll;
  -webkit-overflow-scrolling: touch;
  /* border: 1px solid #000; */
  position: relative;
}
.operationBox .enclose {
  position: relative;
  top: 0px;
}
.operationBox .down {
  position: absolute;
  width: 100%;
  overflow: hidden;
  background-color: #eee;
  padding-bottom: 7px;
  transform: translateY(-7.2px);
}
</style>